<template>
    <div class="packageAlert">
        <el-button
            type="text" 
            @click="checkLogistics(express, packageCode)">
            <slot></slot>
        </el-button>
        
        <!-- 物流弹出框 -->
        <el-dialog :title="dialogTitle" v-dialogDrag :visible.sync="editVisible" width="550px">
            <el-steps v-if="stepsList && stepsList.length > 0" direction="vertical" :active="0" space="60px">
                <el-step 
                    v-for="data in stepsList" 
                    :title="data.expressDesc" 
                    :description="data.expressTime | formatDate">
                </el-step>
            </el-steps>
            <div v-else class="noMsg">暂无信息</div>
            <span slot="footer" class="dialog-footer">            
            </span>
        </el-dialog>

            
    </div>
</template>

<script>
    export default {        
        props: ['express','packageCode'],
        data(){
            return{
                dialogTitle: '标题',
                editVisible: false,
                stepsList: []
            }
        },
        methods: {
            checkLogistics(express, packageCode){
                this.dialogTitle = "订单跟踪 "+ express;
                this.editVisible = true;
                this.$axios
                    .post("/admin/order/getOrderExpressList.json",{
                        packageCode: packageCode,
                        expressNo: express.split('/')[1]
                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            this.stepsList = data.list;      
                        }else{
                            this.$message.error(data.message);
                        } 
                    })
            }
        }
    }

</script>


<style>
    .packageAlert .el-dialog__wrapper{
        text-align: left;
    }
    .packageAlert .el-step{
        padding-left: 20px;
    }
    .packageAlert .el-step .el-step__line{
        bottom: -7px;
    }
    .packageAlert .el-step.is-vertical .el-step__line{
        left: 8px;
    }
    .packageAlert .el-step__icon{
        width: 18px;
        height: 18px;
        color: transparent;
        background: transparent;
        border-color: transparent;
    }
    .packageAlert .el-step__head.is-process .el-step__icon{
        background: #8ddece;
    }
    .packageAlert .el-step__icon-inner{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgb(26,188,256);
    }
    .packageAlert .el-step__head.is-wait .el-step__icon-inner{
        background: #cccccc;
    }
    .packageAlert .el-step__head.is-process {
        color: #409EFF;
        border-color: #409EFF;
    }
    .packageAlert .el-step__title{
        color: #999999;
        font-size: 14px;
    }
    .packageAlert .el-step__description{
        color: #ccc;
    }
    .noMsg{
        color: #ccc;
    }
</style>
